<template>
  <Card class="list-page" :style="listPageStyle">
    
    <div class='list-page-col'>
        <slot name="bar" />
    </div>

    <Affix :offset-top="0" @on-change='sss' >
      <Row class='list-page-col search-bar' type='flex' :style="searchBarStyle" justify='space-between' align="middle">
        <Col>
          <slot name="sort"/>
        </Col>
        <ButtonGroup>
            <slot name="button"/>
        </ButtonGroup>
      </Row>
    </Affix>

    <Row class='bar-15'>
      <slot name="table"/>
    </Row>

    <Row
      class='bar-15'
      type='flex'
      justify='center'>
      <Page :total="page.total" :current="page.pageNum" :page-size="page.pageSize" @on-change="pageChange" show-total show-elevator />
    </Row>
    <Row
      class='bar-15'
      type='flex'
      justify='center'>
      <slot name="other"/>
    </Row>
  </Card>
</template>
<script>
export default {
  props:{
    page:{
      type:Object,
      default:()=>{
        return {
          total:0,
          pageNum:1,
          pageSize:15,
        }
      }
    }
  },
  data () {
    return {
      typeMap:{
        '添加':'success',
        '增加':'success',
        '修改':'warning',
        '转移':'info',
        '删除':'error',
      },
      hasResize:false,
      isAta:false,
      listPageStyle:{

      },
      searchBarStyle:{
        width:'100%'
      },
      searchBarStyleTemp:{
        backgroundColor:'#ff552e',
      },
      searchBarStyleTemp2:{
        width:'100%'
      },
    }
  },
  computed:{
    bodyWidth(){
      return document.body.clientWidth;
    }
  },
  mounted(){
    this.resize();
    window.onresize = () => {
      this.resize()
    }
  },
  methods:{
    resize(){
      if(!this.hasResize){
        this.hasResize = true;
        var s = 1000,t=-10;
        if(document.body.clientWidth < 1000){
          s = 1000;
          t = -10;
        }else if(document.body.clientWidth < 1360){
          s = 1000;
          t = (s - document.body.clientWidth)/2 - 10;
        }else{
          s = document.body.clientWidth - 300;
          t = (s - document.body.clientWidth)/2 - 10;
        }
        this.listPageStyle.width = s + 'px';
        this.searchBarStyleTemp.width = document.body.clientWidth + 20 + 'px';
        this.searchBarStyleTemp.margin = '0px '+ t +'px';
        this.searchBarStyleTemp.padding = '10px 50px';
        this.secsd();
        this.$forceUpdate();
        this.$nextTick(()=>{
          this.hasResize = false;
        })
      }
    },
    sss(e){
      this.isAta = e;
      this.secsd();
    },
    secsd(){
      if(this.isAta){
        this.searchBarStyle = this.searchBarStyleTemp;
      }else{
        this.searchBarStyle = this.searchBarStyleTemp2;
      }
    },
    pageChange(num){
      this.page.pageNum = num;
      this.$emit('pageChange',this.page);
    }
  }
}
</script>
<style lang="less">
    .list-page {
      margin: 5px auto;
      >.ivu-card-body{
        padding:10px 5px;
      }
    }
    .bar-15 {
      margin-bottom: 10px
    }
    .list-page-col {

      >div {
        margin-bottom: 10px;
      }
      >button {
        margin-bottom: 10px
      }
    }
    .slot-padding{
        padding:0 4px;
    }
    .slot-bar-item{
      width:600px;
    }
    .slot-search-item{
      margin-left:2em;
    }
    .search-bar{
      width: 100%;
      margin: 10 auto;
      padding:10 auto;
    }
</style>
